<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box {
            width: 520px;
            border: 1px solid #ccc;
        }

        #box th {
            width: 104px;
            border: 1px solid black;
        }

        #box tr {
            width: 520px;
            border: 1px solid black;
        }
    </style>
</head>

<body>
    <div id="app">
        <button @click="addItem">新增</button>
        <span>搜索<input type="text" v-model="search" placeholder="请输入 FirstName"></span>
        <hr>
        <table id="box">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>FirstName</th>
                    <th>LastName</th>
                    <th>Username</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(item, index) in filteredList" :key="item.id">
                    <td>{{ item.id }}</td>
                    <td>{{ item.FirstName }}</td>
                    <td>{{ item.LastName }}</td>
                    <td>{{ item.Username }}</td>
                    <td>
                        <button @click="editItem(index)">编辑</button>
                        <button @click="del(index)">删除</button>
                    </td>
                </tr>
            </tbody>
        </table>

        <!-- 新增编辑弹窗 -->
        <div v-if="isModalVisible" class="modal" tabindex="-1">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" @click="isModalVisible = false">&times;</button>
                        <h4 class="modal-title">信息</h4>
                    </div>
                    <div class="modal-body">
                        <form>
                            <div class="form-group">
                                <label>First Name</label>
                                <input type="text" class="form-control" v-model="editForm.FirstName">
                            </div>
                            <div class="form-group">
                                <label>Last Name</label>
                                <input type="text" class="form-control" v-model="editForm.LastName">
                            </div>
                            <div class="form-group">
                                <label>Username</label>
                                <input type="text" class="form-control" v-model="editForm.Username">
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" @click="isModalVisible = false">取消</button>
                        <button type="button" class="btn btn-primary" @click="handleSubmit">提交</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="./vue.js"></script>
    <script>
        const { createApp, reactive, computed } = Vue;

        createApp({
            setup() {
                const state = reactive({
                    search: '',
                    listData: [
                        { id: 1, FirstName: "safsag", LastName: "vgsdf", Username: "dfhdf" },
                        { id: 2, FirstName: 53235, LastName: 35325, Username: 3523 },
                        { id: 3, FirstName: "fdhdf", LastName: 436, Username: "fdn46" },
                        { id: 4, FirstName: "fdh", LastName: 46, Username: "hfd" }
                    ],
                    editForm: {
                        FirstName: '',
                        LastName: '',
                        Username: ''
                    },
                    editingIndex: -1,
                    isModalVisible: false,
                });

                const filteredList = computed(() =>
                    state.listData.filter(item =>
                        item.FirstName.toString().toLowerCase().includes(state.search.toLowerCase())
                    )
                );

                function addItem() {
                    const newId = Math.max(...state.listData.map(item => item.id)) + 1;
                    const newFirstName = prompt('请输入 FirstName');
                    const newLastName = prompt('请输入 LastName');
                    const newUsername = prompt('请输入 Username');
                    if (newFirstName && newLastName && newUsername) {
                        state.listData.push({
                            id: newId,
                            FirstName: newFirstName,
                            LastName: newLastName,
                            Username: newUsername
                        });
                    }
                }

                function editItem(index) {
                    state.editingIndex = index;
                    const itemToEdit = state.listData[index];
                    state.editForm.FirstName = itemToEdit.FirstName;
                    state.editForm.LastName = itemToEdit.LastName;
                    state.editForm.Username = itemToEdit.Username;
                    state.isModalVisible = true;
                }

                function del(index) {
                    state.listData.splice(index, 1);
                }

                function handleSubmit() {
                    if (state.editingIndex !== -1) {
                        const updatedItem = {
                            ...state.listData[state.editingIndex],
                            FirstName: state.editForm.FirstName,
                            LastName: state.editForm.LastName,
                            Username: state.editForm.Username
                        };
                        state.listData[state.editingIndex] = updatedItem;
                        state.editingIndex = -1;
                        state.isModalVisible = false;
                    }
                }

                return {
                    ...state,
                    filteredList,
                    addItem,
                    editItem,
                    del,
                    handleSubmit
                };
            }
        }).mount("#app");
    </script>
</body>

</html>